<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>10_盒子模型-细节说明-垂直方向</title>
        <style>
            #outer {
                width: 500px;
                height: 300px;
                background-color: aqua;
            }
            /*
            - margin-top和margin-bottom设置为auto，这个时候自动计算为0。
            - margin-top、margin-bottom设置为具体的值，height的值为auto时高度不会被自动拉开（会为0）。
            - 某一边和height设置为auto，外边距为auto的那个会被设置为0。
            - 上、下和height都设置为具体的值，设置的多少就是多少。
            - 都设置为auto时都会设置为0。
            */

            /* #inner {
                width: 500px;
                height: 260px; 
                /* margin-top和margin-bottom设置为auto，这个时候自动计算为0。 */
               /* margin-top: auto;
                margin-bottom: auto;
                background-color: red;
            } */ 

            /* #inner {
                width: 500px;
                height: auto; */
                /* margin-top、margin-bottom设置为具体的值，height的值为auto时高度不会被自动拉开（会为0）。 */
                /* margin-top: 10px;
                margin-bottom: 10px;
                background-color: red;
            } */


              /* #inner {
                width: 500px; */
                /* 某一边的外边距和height设置为auto，外边距为auto的那个会被设置为0
                 高度也会被设置为0
                。 */
                /* height: auto; 
                margin-top: auto;
                margin-bottom: 10px;
                background-color: red;
            } */


            /* #inner {
                width: 500px; 
                height: auto; 
                margin-top: auto;
                margin-bottom: auto;
                background-color: red;
            }  */


        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner"></div>
        </div>
    </body>
</html>